<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/include/head.jsp"%>
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <%@ include file="/WEB-INF/include/menu.jsp"%>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->

            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                            <i class="fa fa-envelope-o"></i>
                            <span class="badge">5</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-head pull-right">
                            <h5 class="title">You have 5 Mails </h5>
                            <ul class="dropdown-list normal-list">
                                <li class="new">
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user1.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">John Doe <span
                                                  class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user2.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user3.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user4.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="thumb"><img src="images/photos/user5.png" alt=""/></span>
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="new"><a href="">Read All Mails</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/photos/user-avatar.png" alt=""/>
                            John Doe
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">

                            <li><a href="#"><i class="fa fa-cog"></i> 修改密码 </a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> 退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->
        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                添加农产品
            </h3>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <div class="panel-body " style="min-height: 725px">
                            <div class="form">
                                <form action="" class="form-horizontal cmxform form-horizontal adminex-form"
                                      id="addForm" onsubmit="return false;">
                                    <div class="form-group">
                                        <label class="control-label col-md-1">选择产品分类</label>
                                        <div class="col-md-4 col-xs-11">
                                            <select class="form-control" style="" id="proType" name="proType">
                                                <option value="">---请选择---</option>
                                                <c:forEach var="item" items="${proTpyeList}">
                                                    <option value="${item.value}">${item.label}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="proCode" class="control-label col-md-1">产品编号</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="proCode" name="proCode" maxlength="20" type="text" class="form-control"
                                                   placeholder="请输入产品编号">
                                        </div>
                                    </div>
                                     <div class="form-group">
                                        <label for="proName" class="control-label col-md-1">产品名称</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="proName" name="proName" maxlength="50" type="text" class="form-control"
                                                   placeholder="请输入产品名称">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="order" class="control-label col-md-1">显示顺序</label>
                                        <div class="col-md-4 col-xs-11">
                                            <input id="order" name="order" maxlength="50" type="number" class="form-control"
                                                   placeholder="请输入显示顺序" value="0">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="remark" class="control-label col-md-1">备注</label>
                                        <div class="col-md-4 col-xs-11">
                                            <textarea id="remark" name="remark" maxlength="255" type="text" class="form-control" style="width:502px;height:120px"
                                                      placeholder="请输备注(最长255个字符)"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-6 col-xs-11">
                                            <button class="btn btn-info" type="submit" style="margin-left: 38%">
                                                提交
                                            </button>
                                        </div>
                                        <div class="col-md-4 col-xs-11"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <!--body wrapper end-->
        <!--footer section start-->
        <%@ include file="/WEB-INF/include/footer.jsp"%>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<%@ include file="/WEB-INF/include/js.jsp"%>

<script type="text/javascript">

    $(function(){
        $('#addForm').validate({
            rules:{
                proType:{
                    required:true
                },
                proCode:{
                    required:true,
                    rangelength: [1, 20],
                    remote: {
                        url:ctx + '/admin/checkProCode',
                        type:'get',
                        data:{
                            proName:function(){return $('#proName').val()},
                        }
                    }
                },
                order:{
                    required:true,
                    digits:true
                },
                proName:{
                    required:true,
                    rangelength: [1, 50],
                    remote: {
                        url:ctx + '/admin/checkProName',
                        type:'get',
                        data:{
                            proName:function(){return $('#proName').val()},
                        }
                    }
                },
                remark:{
                    maxlength:255
                }
            },
            messages:{
                proType:{
                    required:'请选择产品分类'
                },
                proCode:{
                    required:'请填写产品编号',
                    rangelength:'请输入正确的产品编号长度为1～20个字符',
                    remote:'产品编号重复，请修正'
                },
                order:{
                    required:'请输入显示位置',
                    digits:'显示位置必须为数字'
                },
                proName:{
                    required:'请输入产品名称长度为1～50个字符',
                    rangelength: '请输入正确的产品名称长度为1～50个字符',
                    remote: '产品名称重复，请修正'
                },
                remark:{
                    maxlength:'备注信息长度不能超过255字符'
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            submitHandler:function(form){
                var postData = {
                    proType:$('#proType').val(),
                    proName:$('#proName').val(),
                    proCode:$('#proCode').val(),
                    order:$('#order').val(),
                    remark:$('#remark').val()
                };
                utils.post({
                    url:ctx + '/admin/saveAgriPro',
                    data:postData,
                    success:function(data){
                        if(data.code==200){
                            layer.msg("保存成功", {}, function(){
                                window.location.href = ctx + "/admin/agriProList";
                            })
                        }else{
                            layer.alert(data.message);
                        }
                    }
                });
            }
        });
    });
</script>

</body>
</html>
